<template>
  <div class="container">
    <h1>模型微调</h1>
    
    <!-- 微调模型 -->
    <div class="card">
      <h2>模型微调整</h2>
      <div class="form-group">
        <label for="fineTuneModel">选择微调模型:</label>
        <input id="fineTuneModel" v-model="fineTuneModel" placeholder="请输入要微调的模型名称">
      </div>
      <div class="form-group">
        <label for="trainingData">训练数据路径:</label>
        <input id="trainingData" v-model="trainingData" placeholder="请输入训练数据路径">
      </div>
      <button @click="fineTune">开始微调</button>
      <p v-if="fineTuneStatus">{{ fineTuneStatus }}</p>
    </div>
    
    <!-- 导航链接 -->
    <div class="navigation">
      <h3>快速导航</h3>
      <router-link to="/">AI回答</router-link>
      <router-link to="/models">模型管理</router-link>
      <router-link to="/generate">文本生成</router-link>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  name: 'FineTuningView',
  setup() {
    const fineTuneModel = ref('')
    const trainingData = ref('')
    const fineTuneStatus = ref('')

    // 微调模型
    const fineTune = async () => {
      if (!fineTuneModel.value || !trainingData.value) {
        fineTuneStatus.value = '请填写完整的微调信息'
        return
      }
      
      try {
        const response = await fetch('/api/v1/fine-tune', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({
            model_name: fineTuneModel.value,
            dataset_path: trainingData.value
          })
        })
        const data = await response.json()
        fineTuneStatus.value = data.message
      } catch (error) {
        fineTuneStatus.value = '微调失败'
        console.error('微调失败:', error)
      }
    }

    return {
      fineTuneModel,
      trainingData,
      fineTuneStatus,
      fineTune
    }
  }
}
</script>